<template>
	<view>
		<view class="UCenter-bg">
			<view v-if="userInfo.nickname">
				<image class="png" mode="widthFix" :src="userInfo.avatar"></image>
				<view class="margin-top-sm nick_name">
					<text>{{userInfo.nickname}}</text>
				</view>

			</view>
			<view @click="mpWxGetUserInfo" class="first" v-else>
				<image class="person" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F-4o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fac345982b2b7d0a2900fe3b5c9ef76094a369ad0.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649922809&t=4ed56f2182d669575e2367f56edbf94a" 
                mode="aspectFill" lazy-load="true" >
				</image>
				<view class="information">
                    <view style="margin-bottom: 20rpx;">
                        <text class="name">{{name}}</text>
                    </view>
                    <view>
                        <text class="comment">{{quote}}</text>
                    </view>
                    <view class="right">
                        <!-- <image  src="../../static/images/move.gif" mode="widthFix">  </image> -->
                    </view>
                </view>
			</view>

		</view>

        <view class="second">
            <view class="content01">
                <view class="text01">
                    <text>0</text>
                </view>
                <text class="text02">
                    搜索次数
                </text>
            </view>
            <view class="content02">
                <view class="text01">
                    <text>0</text>
                </view>
                <text class="text02">
                    考试次数
                </text>
            </view>
        </view>

        <view class="third">
            <view class="title">
                <text>更多服务</text>
            </view>
            <view class="function_container">
                <view class="functions">
                    <image  src="../../static/images/camera.png" mode="widthFix" > </image>
                    <text class="image_information">识别记录</text>
                </view>
                <view class="functions" @click="$Router.push('/pages-me/examLog')">
                    <image  src="../../static/images/baojing.png" mode="widthFix" > </image>
                    <text class="image_information">考试记录</text>
                </view>
                <view class="function" >
                    <image  src="../../static/images/about.png" mode="widthFix" > </image>
                    <text class="image_information">关于我们</text>
                </view>
                <view class="functions">
                    <image  src="../../static/images/wechat.png" mode="widthFix" > </image>
                    <text class="image_information">联系客服</text>
                </view>
                
                
            </view>
        </view>

<!-- 		<view class="grace-body" v-if="userInfo.nickname">
			<view class="grace-grids-items" @click="$Router.push('/pages-me/examLog')">
				<text class="iconfont icon-jilu"></text>
				<text class="grace-grids-text">考试记录</text>
			</view>

			<view class="grace-grids-items " @click="$Router.push('/pages-me/examSort')">
				<text class="iconfont  icon-paihang"></text>
				<text class="grace-grids-text">考试排行</text>
			</view>
		</view> -->

	</view>
</template>
<script>
    import {
        mapState
    } from 'vuex'
    export default {
        components: {},
        data() {
            return {
                name: '用户001',
                quote: '今天分一分，明天美十分!'
            };
        },
        computed: {
            ...mapState(['userInfo'])
        },
        onShow() {
            //加载
            console.log('userInfo', this.userInfo)
        },
        onLoad() {

        },
        onShareAppMessage() {},
        onShareTimeline() {},
        methods: {

        }
    }
</script>

<style lang="scss" scoped>
		text {
			white-space: nowrap;
		}
    .grace-body {
        width: 750rpx;
        background-color: #FFFFFF;
        display: flex;
        flex-direction: row;
    }
    
    .UCenter-bg {
        /* background-color: #0da408; */
        background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp252397733.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649934858&t=56e37adcfff33c1639fcc72a21a6844a");
        background-size: 100% 100%;
        height: 395rpx;
        overflow: hidden;
        position: relative;
        color: #fff;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
        border-radius: 0 0 20% 20%;
    }
    
    .UCenter-bg .first {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: 204rpx;
        margin-top: 40rpx;
    }
    
    .UCenter-bg .first .information {
        height: 110rpx;
        margin: 50rpx 0 0 20rpx;
    }
    
    .UCenter-bg .first .information .name {
        font-weight: bold;
        font-size: 18px;
    }
    
    .UCenter-bg .first .information .comment {
        font-size: 14px;
    }
    
    .UCenter-bg .first .information .right {
        width: 200rpx;
        height: 200rpx;
        position: absolute;
        right: 0;
        top: 100rpx;
    }
    
    .UCenter-bg .first .information .right image {
        width: 200rpx;
        height: 200rpx;
    }
    
    .UCenter-bg image.person {
        border-radius: 50%;
        width: 160rpx;
        height: 160rpx;
        border: 2px solid #0da408;
        display: block;
        margin: 20rpx 0 20rpx 20rpx;
    }
    
    .second {
        border-radius: 20rpx;
        border: 1px solid #fff;
        background-color: #FFFFFF;
        box-shadow: 10px 10px 10px rgba(167, 166, 166, 0.3);
        width: 660rpx;
        height: 120rpx;
        position: absolute;
        top: 300rpx;
        left: 40rpx;
        box-sizing: border-box;
        padding: 20rpx 120rpx;
        display: flex;
        flex-direction: row;
    }
    
    .second .content01 {
        width: 100rpx;
        height: 80rpx;
        margin-right: 220rpx;
        text-align: center;
    }
    
    .second .text01 {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 10rpx;
    }
    
    .second .text02 {
        font-size: 12px;
        color: #6f6f6f;
    }
    
    .second .content02 {
        width: 100rpx;
        height: 80rpx;
        text-align: center;
    }
    
    .third {
        width: 660rpx;
        height: 500rpx;
        box-shadow: 10px 10px 10px rgba(167, 166, 166, 0.3);
        background-color: #fff;
        border: 1px solid #fff;
        border-radius: 20rpx;
        margin: 60rpx auto;
    }
    
    .third image {
        width: 100rpx;
        height: 80rpx;
    }
    
    .third .image_information {
        width: 100rpx;
        height: 20rpx;
        line-height: 20rpx;
        font-size: 12px;
        text-align: center;
    }
    
    .third .title {
        font-size: 16px;
        font-weight: bold;
        margin: 20rpx 0 60rpx 10rpx;
    }
    
    .third .function_container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 540rpx;
        height: 400rpx;
        margin: 0 auto;
    }
    
    .third .functions {
        width: 100rpx;
        height: 100rpx;
        margin-right: 120rpx;
    }
    
    .third .function {
        width: 100rpx;
        height: 100rpx;
    }
    
    .UCenter-bg image.png {
        border-radius: 50%;
    }
    
    .UCenter-bg .gif-wave {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 9;
        mix-blend-mode: screen;
        height: 100rpx;
    }
    
    .margin-top-sm {
        text-align: center;
    }
    
    .grace-grids-items {
        margin: 50rpx 0rpx 0rpx 50rpx;
        display: flex;
        flex-direction: column;
    }
    
    .grace-grids-items .grace-grids-text {
        font-size: 28rpx;
        line-height: 80rpx;
    }
    
    .nick_name {
        font-size: 32rpx;
    }
</style>